<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKECHERS首页</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="reset.css">

    <style>
        /* 轮播图 */
        
        .banner {
            height: 665px;
            overflow: hidden;
            background-color: orange;
            position: relative;
        }
        
        .bannerlist {
            width: 99999px;
        }
        
        .bannerlist li {
            float: left;
        }
        
        .banner .jtleft,
        .banner .jtright {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #000;
            opacity: 0.3;
            font-size: 32px;
            color: white;
            line-height: 80px;
            text-align: center;
            position: absolute;
            top: 43%;
            cursor: pointer;
            /* transform: translateX(-50%); */
        }
        
        .banner .jtright:hover,
        .banner .jtleft:hover {
            background-color: #000;
            opacity: 0.5;
            transition: all 0.3s;
        }
        
        .banner .jtleft {
            left: 7.25%;
        }
        
        .banner .jtright {
            right: 1.25%;
        }
        
        .dotlist li {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #000;
            opacity: 0.45;
            margin: 6px;
            float: left;
            cursor: pointer;
        }
        
        .dotlist {
            width: 100px;
            position: absolute;
            bottom: 13px;
            left: 50%;
        }
        
        .dotlist li.focus {
            background: #000;
            opacity: 1;
        }
        
        .bannerlist img {
            width: 1519px;
            height: 665px;
        }
        
        .good {
            background: #fff;
        }
        
        .good-con {
            width: 79%;
            background-color: #fff;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 25px 70px;
            padding-bottom: 0;
        }
        
        .good-con .imgmessage {
            display: flex;
            justify-content: space-between;
            /* background: brown; */
            cursor: pointer;
            margin-bottom: 25px;
        }
        
        .good-con .imgmessage .imgmessage1 {
            width: 25%;
            position: relative;
            margin-right: 15px;
        }
        
        .good-con .imgmessage .imgmessage1 img {
            width: 100%;
        }
        
        .good-con .imgmessage .imgmessage1 span {
            position: absolute;
            top: 33px;
            left: 26px;
            font-size: 18px;
        }
        
        .good-con .imgmessage .imgmessage1.last {
            margin-right: 0;
        }
        
        .good-con .topmessage {
            width: 100%;
            cursor: pointer;
            margin-bottom: 34px;
        }
        
        .good-con .topmessage img {
            width: 100%;
        }
        
        .good-con .newgoods {
            width: 293px;
            width: 100%;
            background: burlywood;
            background: url(img/newgoodsL.png) no-repeat 0 66%, url(img/newgoodsR.png) no-repeat 100% 66%;
        }
        
        .good-con .newgoods p {
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 21px;
        }
        
        .good-con .newgoods .shoes {
            display: flex;
            width: 92%;
            /* background: blue; */
            margin: 0 auto;
            text-align: center;
            justify-content: space-evenly;
            margin-bottom: 43px;
        }
        
        .good-con .newgoods .shoes dl {
            text-align: center;
            width: 25%;
            padding: 0 10px;
            box-sizing: border-box;
            cursor: pointer;
        }
        
        .good-con .newgoods .shoes img {
            width: 100%;
            margin-bottom: 5px;
        }
        
        .good-con .newgoods .shoes dd {
            color: #6b6b6b;
            font-weight: bold;
        }
        
        .good-con .newgoods .shoes b {
            width: 123px;
            margin-left: 50px;
            background: #000;
            color: white;
            display: block;
            line-height: 35px;
            font-size: 18px;
            text-align: center;
            margin-top: 8px;
            font-weight: normal;
        }
        
        .good .downmessage {
            width: 79%;
            margin: 0 auto;
            /* background: blanchedalmond; */
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .good .downmessage>div {
            width: 49%;
            margin-bottom: 25px;
            cursor: pointer;
            position: relative;
        }
        
        .good .downmessage img {
            width: 100%;
        }
        
        .good .downmessage .words {
            position: absolute;
            bottom: 35%;
            right: 6px;
            font-size: 26px;
            color: white;
        }
        
        .good .downmessage .words a {
            text-decoration: underline;
            color: white;
            font-size: 22px;
        }
        
        .moregoods {
            width: 77%;
            margin: 0 auto;
            background-color: #000;
            color: white;
            text-align: center;
            height: 100px;
            line-height: 100px;
            cursor: pointer;
            font-size: 25px;
            margin-bottom: 31px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg"" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <ul class="bannerlist" style="margin-left: 0;">
            <li><img src="img/pc9.jpg" alt=""></li>
            <li><img src="img/pc-10.12.jpg" alt=""></li>
            <li><img src="img/pc-10.9.jpg" alt=""></li>
        </ul>
        <div class="jtleft">&lt;</div>
        <div class="jtright">&gt;</div>
        <ol class="dotlist">
        </ol>
    </div>

    <!-- 商品列表 -->
    <div class="good">
        <div class="good-con">
            <div class="imgmessage">
                <div class="imgmessage1">
                    <img src="../img/2-1.jpg" alt="">
                    <span>
                        MEN <br>男子  &gt;
                    </span>
                </div>
                <div class="imgmessage1">
                    <img src="../img/2-2.jpg" alt="">
                    <span>
                        WOMEN <br>女子  &gt;
                    </span>
                </div>
                <div class="imgmessage1">
                    <img src="../img/2-3.jpg" alt="">
                    <span>
                        BOYS <br>男童  &gt;
                    </span>
                </div>
                <div class="imgmessage1 last">
                    <img src="../img/2-4.jpg" alt="">
                    <span>
                       GIRLS <br>女童  &gt;
                    </span>
                </div>
            </div>
            <div class="topmessage"><img src="img/3-1-pc.jpg" alt="">
            </div>
            <div class="topmessage"><img src="img/3-3-pc.jpg" alt="">
            </div>
            <div class="newgoods">
                <p>NEW 新品</p>
                <div class="shoes">
                    <dl>
                        <dt><img src="img/NEW1.jpg" alt=""></dt>
                        <dd>UNO</dd>
                        <b>立即选购 ></b>
                    </dl>
                    <dl>
                        <dt><img src="img/NEW2.jpg" alt=""></dt>
                        <dd>GO RUN 400</dd>
                        <b>立即选购 ></b>
                    </dl>
                    <dl>
                        <dt><img src="img/NEW3.jpg" alt=""></dt>
                        <dd>ENERGY RACER</dd>
                        <b>立即选购 ></b>
                    </dl>
                    <dl>
                        <dt><img src="img/NEW4.jpg" alt=""></dt>
                        <dd>STAMINA</dd>
                        <b>立即选购 ></b>
                    </dl>

                </div>
            </div>
            <div class="newgoods">
                <p>APPAREL 服配</p>
                <div class="shoes">
                    <dl>
                        <dt><img src="img/1.jpg" alt=""></dt>
                        <dd>男女同款外套</dd>
                        <b>立即选购 ></b>
                    </dl>
                    <dl>
                        <dt><img src="img/2.jpg" alt=""></dt>
                        <dd>男女同款长裤</dd>
                        <b>立即选购 ></b>
                    </dl>
                    <dl>
                        <dt><img src="img/3.jpg" alt=""></dt>
                        <dd>男子外套</dd>
                        <b>立即选购 ></b>
                    </dl>
                    <dl>
                        <dt><img src="img/4.jpg" alt=""></dt>
                        <dd>女子卫衣</dd>
                        <b>立即选购 ></b>
                    </dl>

                </div>
            </div>
        </div>
        <div class="downmessage">
            <div><img src="img/5-1.jpg" alt="">
                <div class="words">D'LITES <br><a href="">时尚复古 ></a></div>
            </div>
            <div><img src="img/5-2.jpg" alt="">
                <div class="words">LIGHTS <br><a href="">灯鞋 ></a></div>
            </div>
            <div><img src="img/5-3.jpg" alt="">
                <div class="words">GO WALK <br><a href="">健步鞋 ></a></div>
            </div>
            <div><img src="img/5-4.jpg" alt="">
                <div class="words"><a href="">女子服饰 ></a><br><a href="">男子服饰 ></a></div>
            </div>
        </div>
        <div class="moregoods">查看所有商品</div>
    </div>
    <div class="bottom">
        <div class="btop">
            <div class="top-list">
                <span><i>会员</i></span>
                <span><i>门店</i></span>
            </div>
        </div>
        <div class="middle">
            <div class="copy">
                <span>我们的支付方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="img/wechatpay_pc.png" alt="" >&nbsp;&nbsp;
                <img src="img/alipay_pc.png" alt="">&nbsp;&nbsp;
                <img src="img/unionpay_pc.png" alt="">&nbsp;&nbsp;
            </span>
            </div>
            <div class="china"><img src="img/cn.png" alt="">&nbsp;&nbsp;中国</div>
        </div>
        <div class="lastmessage">
            <div class="lastL">
                <ul>
                    <b>联系客服</b>
                    <li>团购申请</li>
                    <li>在线客服</li>
                    <li>网站地图</li>
                </ul>
                <ul>
                    <b>我的账户</b>
                    <li>会员权利</li>
                    <li>我的信息</li>
                    <li>我的订单</li>
                    <li>我的积分</li>
                    <li>我的优惠券</li>
                    <li>收件地址</li>
                </ul>
                <ul>
                    <b>帮助中心</b>
                    <li>订单异常</li>
                    <li>发票</li>
                    <li>支付方式</li>
                    <li>退货说明</li>
                    <li>找回密码</li>
                    <li>注册与登录</li>
                </ul>
                <ul>
                    <b>关于斯凯奇</b>
                    <li>斯凯奇故事</li>
                    <li>联系我们</li>
                    <li>免责声明</li>
                    <li>隐私保护</li>
                    <li>服务协议</li>
                    <li>投资关系</li>
                    <li>招贤纳士</li>
                </ul>
            </div>
            <div class="lastR">
                <b>关注我们</b>
                <p class="wechat"><img src="img/weibo.png" alt=""><img src="img/wechat.png" alt="">
                    <img src="img/QRCode.jpg" alt="" class="code" id="template"></p>
                <i>获取斯凯奇最新资讯</i>
                <div class="email"> <input type="email"> <em></em></div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-con">
            <div class="footL">
                <p>广州市利德丹贸易有限公司保留所有权利</p>
                <p><span style="color:#002b57">粤ICP备12085615号-1 </span>&copy; 2018 SKECHERS,INC</p>
            </div>
            <div class="footR">
                <img src="img/pc_kx.png" alt="">
                <img src="img/pc_cx.png" alt="">
                <img src="img/pc_ga.png" alt="">
                <img src="img/pc_zzN.png" alt="">
            </div>

        </div>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>
    <script>
        //轮播图
        let n = 0
        let bannerlists = $(".bannerlist li")
        for (let i = 0; i < bannerlists.length; i++) {
            $(".dotlist").append("<li></li>")

        }
        let dotlists = $(".dotlist li")
        dotlists.eq(0).addClass("focus")

        function imgchange() {
            $(".bannerlist").animate({
                marginLeft: -n * 1519
            })
            dotlists.removeClass("focus")
            dotlists.eq(n).addClass("focus")
        }
        $(".jtright").click(function() {
            n++;
            if (n === bannerlists.length) {
                let newimg = bannerlists.eq(0).clone(true)
                $(".bannerlist").append(newimg)
                $(".bannerlist").animate({
                    marginLeft: -bannerlists.length * 1519
                }, function() {
                    $(".bannerlist").css({
                        marginLeft: 0
                    })
                    newimg.remove()
                })
                n = 0
            }
            imgchange()
        })
        $(".jtleft").click(function() {
            n--;
            if (n === -1) {
                n = 0
                let newimg = bannerlists.eq(bannerlists.length - 1).clone(true)
                $(".bannerlist").prepend(newimg)
                $(".bannerlist").css({
                    marginLeft: -1519
                })
                $(".bannerlist").animate({
                    marginLeft: -n * 1519
                }, function() {
                    newimg.remove()
                    $(".bannerlist").css({
                        marginLeft: -(bannerlists.length - 1) * 1519
                    })
                })
                n = bannerlists.length - 1
            } else {
                imgchange()
            }

        })
        dotlists.click(function() {
            n = $(this).index()
            imgchange()
        })
        $(".banner").mouseover(function() {
            $(".jtleft").fadeIn()
            $(".jtright").fadeIn()

        })
        $(".banner").mouseleave(function() {
            $(".jtleft").fadeOut()
            $(".jtright").fadeOut()
        })
        $(".good-con").click(function() {
            location.href = `${address}/goodsdetail.html`
        })
        $(".downmessage").click(function() {
            location.href = location = `${address}/goodsdetail.html`
        })
        setInterval(function() {
            $(".jtright").click()
        }, 3000)
    </script>
</body>

</html>